import React, {Component, Children, PropTypes} from 'react'
import classnames from 'classnames'
function rc() {

}
class Tabs extends Component {
    constructor(props, context) {
        super(props, context)
        this.state = {
            select: 0
        }
    }

    static propTypes = {
        className: PropTypes.string,
        onChange: PropTypes.func
    }

    static defaultProps = {
        className: '',
        onChange: rc
    }

    selectTab(i) {
        return classnames({
            'rc-tab-head': true,
            'active': this.state.select === i
        })
    }

    handChange(index) {
        const {onChange} = this.props
        this.setState({
            select: index
        })
        onChange(index)

    }

    render() {
        const {className, children, tools} = this.props
        return (
            <div className={className}>
                {/*head*/}
                <div className='rc-head-container '>
                    {Children.map(children, (tab, index) => {
                        return (<div onClick={this.handChange.bind(this, index)}
                                     className={this.selectTab(index)}>{tab.props.tab}</div>);
                    })}

                    {/*tool*/}
                    {tools && tools.map((tool) => {
                        return (<div className="rc-tab-tool" style={{float: 'right'}}>
                            {tool}
                        </div>)
                    })}
                </div>
                {/*content*/}
                <div className='rc-body-container'>
                    {/*克隆tab，添加select props,需要判断children是否为数组*/}
                    {React.cloneElement(Array.isArray(children)?children[this.state.select]:children, {select: true})}
                </div>
            </div>
        )


    }
}


export default Tabs